<template>

  <div>
    <div class="addBtn">
      <el-button type="primary" @click="handleButtonAdd()">+ 添加</el-button>

      <el-dialog title="添加" :visible.sync="dialogTableVisible">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="名称" prop="title">
            <el-input v-model="ruleForm.title"></el-input>
          </el-form-item>
          <el-form-item label="图片">
            <el-upload v-if="dialogImageUrl==''" action="https://api.zctj16888.com/admin/v1/image/ossUpload" list-type="picture-card"
              :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handleAvatarSuccess" name="image" >
              <i class="el-icon-plus"></i>
            </el-upload>
            <div v-else>
                <img style="width: 146px;height: 146px;" :src="dialogImageUrl">
                <i class="el-icon-delete" @click="deleteImg"></i>
              </div>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>

          <el-form-item label="机型选择">
            <el-radio-group v-model="ruleForm.platform">
              <el-radio :label="1">安卓</el-radio>
              <el-radio :label="2">IOS</el-radio>
              <el-radio :label="3">全部</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="分类">
            <el-radio-group v-model="ruleForm.type">
              <el-radio :label="1">推荐</el-radio>
              <el-radio :label="2">资讯</el-radio>
              <el-radio :label="3">专家</el-radio>
              <el-radio :label="4">直播</el-radio>
              <el-radio :label="5">活动</el-radio>
              <el-radio :label="6">首单</el-radio>
              <el-radio :label="7">爆单</el-radio>
              <el-radio :label="8">双十一</el-radio>
              <el-radio :label="9">活动背景图</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="放置位置">
            <el-radio-group v-model="ruleForm.position">
              <el-radio :label="1">首页</el-radio>
              <el-radio :label="2">资讯</el-radio>
              <el-radio :label="3">引导页</el-radio>
              <el-radio :label="4">活动背景图</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="路径">
            <el-input v-model="ruleForm.route"></el-input>
          </el-form-item>
          <el-form-item label="排序">
            <el-input v-model="ruleForm.sort"></el-input>
          </el-form-item>
          <el-form-item label="对应类型id">
            <el-input v-model="ruleForm.op_id"></el-input>
          </el-form-item>
          <el-form-item label="是否显示">
            <el-radio-group v-model="ruleForm.status">
              <el-radio :label="1">显示</el-radio>
              <el-radio :label="2">隐藏</el-radio>
            </el-radio-group>
          </el-form-item>

        </el-form>
        <div style="text-align: right;">
          <el-button @click="clickDelete">取消</el-button>
          <el-button type="primary" @click="clickConfirm">确认</el-button>
        </div>
      </el-dialog>
    </div>
    
    <el-table :data="tableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }">
      <el-table-column prop="id" label="ID" align="center">
      </el-table-column>
      <el-table-column prop="title" label="名称" align="center">
      </el-table-column>
      <el-table-column prop="img_url" label="图片" align="center">
        <template slot-scope="scope">
          <el-image style="width: 80px; height: 80px" :src="scope.row.img_url" fit="fill"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" align="center">
      </el-table-column>
      <el-table-column prop="platform" label="机型" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.platform == 1">
            安卓
          </span>
          <span v-if="scope.row.platform == 2">
            苹果
          </span>
          <span v-if="scope.row.platform == 3">
            全部
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="分类" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.type == 1">
            推荐
          </span>
          <span v-if="scope.row.type == 2">
            资讯
          </span>
          <span v-if="scope.row.type == 3">
            专家
          </span>
          <span v-if="scope.row.type == 4">
            直播
          </span>
          <span v-if="scope.row.type == 5">
            活动
          </span>
          <span v-if="scope.row.type == 6">
            首单
          </span>
          <span v-if="scope.row.type == 7">
            爆单
          </span>
          <span v-if="scope.row.type == 8">
            双十一
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="创建时间" align="center">
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 1">
            <div class="status-icon"></div>显示
          </span>
          <span v-if="scope.row.status == 2">
            <div class="status-icon"></div>隐藏
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="handleButton1Click(scope.row)">修改</el-button>
          <el-button size="small" type="danger" @click="handleButton2Click(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="tabListPage">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="pageSizes" :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">
      </el-pagination>
    </div>

  </div>

</template>

<script>
import { param } from '@/utils';
import { uploadFile } from '../../../libs/util';
import { bannerList, bannerModify,upImgData,bannerDelete } from '../../../libs/api'
export default {
  data() {
    return {
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
        ],
      },
      dialogImageUrl: '',
      dialogVisible: false,
      ruleForm: {},
      tableData: [],
      alltabData: [],
      dialogTableVisible: false,

      // 总数据
      tableData: [],
      currentPage: 1,
      totalCount: 1,
      PageSize: 5,
      pageSizes: [5, 10],
    }
  },
  created() {
    this.getBannerList()
  },
  methods: {
    UploadImage(params){
      const formData = new FormData();
      formData.append("file", params.filename);
      console.log(formData)
      // upImgData({
      //   image:
      // })
      
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage = val
      this.getBannerList()
    },
    // 分页
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数 
      this.PageSize = val
      // 点击每页显示的条数时，显示第一页
      console.log(val)
      this.PageSize = val
      // 改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1
      this.getBannerList()
    },
    // 获取banner列表
    getBannerList() {
      bannerList({
        page: this.currentPage,
        limit: this.PageSize
      }).then(res => {
        console.log('接口1', res)
        this.tableData = res.data.list
        this.alltabData = res.data.list
        this.totalCount = res.data.total
      })
    },
    deleteImg(){
            this.dialogImageUrl = ''
        },
    // 修改banner
    clickConfirm() {
      console.log(this.ruleForm.type)
      if(this.ruleForm==''){
        bannerModify({
        position: this.ruleForm.position,
        title: this.ruleForm.title,
        status: this.ruleForm.status,
        type: this.ruleForm.type,
        op_id: this.ruleForm.op_id,
        sort: this.ruleForm.sort,
        img_url: this.ruleForm.img_url,
        platform:this.ruleForm.platform,
        route:this.ruleForm.route
      }).then(res => {
        console.log('接口2', res)
        this.getBannerList()
      })
      }else{
        bannerModify({
        position: this.ruleForm.position,
        title: this.ruleForm.title,
        status: this.ruleForm.status,
        type: this.ruleForm.type,
        op_id: this.ruleForm.op_id,
        sort: this.ruleForm.sort,
        id: this.ruleForm.id,
        route:this.ruleForm.route,
        // img_url: this.ruleForm.img_url
        img_url:this.dialogImageUrl,
        platform:this.ruleForm.platform
      }).then(res => {
        console.log('接口2', res)
        this.getBannerList()
      })
      }
      
      this.dialogTableVisible = false
    },
    handleButton1Click(row) {
      // 处理按钮1点击事件
      this.ruleForm = row
      console.log(this.ruleForm)
      this.dialogImageUrl = this.ruleForm.img_url
      this.dialogTableVisible = true
    },
    handleButton2Click(row) {
      // 处理按钮2点击事件
      console.log(row)
      this.$confirm('此操作将永久删除该图片, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          bannerDelete({
        id:row.id
      }).then(res=>{
        console.log('接口2', res)
        if(res.code==1){
          this.getBannerList()
        }
      })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    handleButtonAdd() {
      this.dialogTableVisible = true
    },
    clickDelete() {
      this.dialogTableVisible = false
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleAvatarSuccess(res, file) {
        // this.imageUrl = URL.createObjectURL(file.raw);
        console.log(res)
        console.log(URL.createObjectURL(file.raw))
        // this.ruleForm.img_url = res.data.url
        this.dialogImageUrl = res.data.url
      },
    handleFileUpload(params,file) {
      console.log(file)
      // const file = params.file
      // var form = params.file.name
      // // form.append('image',file)
      // const url = 'image/ossUpload'
      // console.log(form)
      // upImgData({
      //   image:params.file
      // }).then(res=>{
      //   console.log(res)
      // })
      // uploadFile(url,form,(e)=>{
      //   if(e.lengthComputable){
      //     console.log(`Uploaded ${e.loaded} of ${e.total} bytes`)
      //   }
      // }).then(response=>{
      //   console.log('上传文件成功',response.data)
      // }).catch(error=>{
      //   console.log('上传文件失败',error)
      // })
    }
  }
}
</script>

<style>
.addBtn {
  margin-left: 30px;
  margin-bottom: 30px;
  margin-top: 30px;
}

.status-icon {
  width: 8px;
  height: 8px;
  border-radius: 1px;
  margin-right: 5px;
  position: relative;
  left: 32px;
  bottom: -15px;
}

.icon1 {
  background-color: #19be6b;
}

.icon0 {
  background-color: #eb194d;
}
</style>




